<template>
  <div class="cb-main-container">
    <div class="search-box">
      <el-form :model="searchFormConfig.model" ref="searchFormRef" inline>
        <el-form-item label="名称" prop="name">
          <el-input v-model="searchFormConfig.model.name" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="searchFormConfig.model.status" placeholder="请选择状态" style="width: 168px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="refresh" @click="onReset()">重置</el-button>
          <el-button icon="search" type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-content">
      <div class="operation-box">
        <el-button icon="plus" type="primary" @click="add">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableConfig.data" size="large">
          <el-table-column type="index" width="50" />
          <el-table-column property="name" label="名称"/>
          <el-table-column property="shortName" label="简称" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="(scope.row.status === 1) ? 'primary' : 'info'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="remarks" label="备注" show-overflow-tooltip/>
          <el-table-column label="操作" align="right">
            <template #default="scope">
              <el-button link type="primary" icon="edit" @click="onEdit(scope.row)">编辑</el-button>
              <el-button link type="danger" icon="delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <el-pagination background layout="prev, pager, next" :total="searchFormConfig.model.total" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>

  <!-- 添加/编辑 -->
  <el-dialog v-model="dialogConfig.visible" :title="dialogConfig.title" :width="dialogConfig.width" @close="dialogCloseHandle">
    <el-form ref="fromRef" :model="fromConfig.model" :label-width="fromConfig.labelWidth" :rules="fromConfig.rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="fromConfig.model.name" autocomplete="off" placeholder="请填入单位名称" />
      </el-form-item>
      <el-form-item label="简称" prop="shortName">
        <el-input v-model="fromConfig.model.shortName" placeholder="请输入单位简称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
          <el-select v-model="fromConfig.model.status" placeholder="请选择状态" style="width: 168px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" rows="6" v-model="fromConfig.model.remarks" placeholder="请输入备注信息" show-word-limit maxlength="500" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogConfig.visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue"
import { unitAdd, unitEdit, unitPageList } from '@/api/erp/product.js'
import { clear } from '@/util/ObjectUtil.js'

defineOptions({
  name: '/erp/productManagement/unit'
})

const searchFormRef = ref()
const searchFormConfig = reactive({
  model: {
    name: '',
    status: '',
    pageNum: 1,
    pageSize: 10,
    total: 0,
  }
})

const fromRef = ref(null)
const fromConfig = reactive({
  model: {
    id: '',
    name: '',
    shortName: '',
    status: 1,
  },
  rules: {
    name: [
      {required: true, message: '单位名称不能为空', trigger: 'blur'}
    ]
  },
  labelWidth: 72
})

const dialogConfig = reactive({
  visible: false,
  title: '新增',
  width: '500'
})

const tableConfig = reactive({
  data: []
})

let statusEnum = [
  {label: '禁用', value: 0},
  {label: '启用', value: 1}
]

const onReset = () => {
  if (!searchFormRef.value) return
  searchFormRef.value.resetFields()
  searchFormConfig.model.pageSize = 1
  requestUnitPageList()
}

const onSearch = () => {
  searchFormConfig.model.pageSize = 1
  requestUnitPageList()
}

const dialogCloseHandle = () => {
  if (!fromRef.value) return
  fromRef.value.resetFields()

  clear(fromConfig.model)
}
  // 新增
const add = () => {
  dialogConfig.visible = true
}

const handleCurrentChange =(currentPage) => {
  searchFormConfig.model.pageSize = currentPage
  requestUnitPageList()
}

// 编辑
const onEdit = async (rowData) => {
  fromConfig.model = {...rowData}
  dialogConfig.visible = true
}

//  提交
const onSubmit = async () => {
  const valid = await fromRef.value.validate()
  if (valid) {
    if (fromConfig.model.id) {
      await unitEdit(fromConfig.model)
    } else {
      await unitAdd(fromConfig.model)
    }
    await requestUnitPageList()
    dialogConfig.visible = false
  }
}

const requestUnitPageList = () => {
  unitPageList(searchFormConfig.model).then(resp => {
    tableConfig.data = resp.data.data
    searchFormConfig.model.total = Number.parseInt(resp.data.total)
  })
}

onMounted(() => {
  requestUnitPageList()
})
</script>

<style scoped lang="scss">
.cb-main-container {
  display: flex;
  flex-direction: column;

  .search-box {
    @include containerStyle;
    padding-bottom: 0;
  }

  .main-content {
    flex: 2;
    @include containerStyle;

    display: flex;
    flex-direction: column;

    .table-box {
      flex: 2;
      margin-bottom: $cb_margin-value;
    }
  }
}
</style>
